.tree-wrapper {
  width: 100%;
  height: 100%;
  padding-left: 30px; 
  position: relative;
  overflow: hidden;
}

.outter-most-nodes-wrapper:not(:first-child) {
  margin-top: 20px;
}
.nodes-wrapper {
  
  & > .nodes-parent {
    position: relative;
  }
  &:not(:last-child) > .nodes-parent {
    border-left: 1px solid #1890ff;
  }
  &:last-child  > .nodes-parent > .nodes {
    
    & > .line-last-node {
      position: absolute;
      top: -20px;
      border-right: 1px solid #1890ff;
    }
  }
}
.nodes {
  margin-top: 20px;
  position: relative;
  &.outter-most-node {
    margin-top: 0;
  }

  & > .line {
    height: 2px;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    border-top: 1px solid #1890ff;
  }
  & > .tree-toggle-btn {
    position: absolute;
    top: 50%;
    left: -20px;
    font-size: 17px;
    transform: translateY(-50%);
  }
}

.string-node-content {
  padding: 20px 10px;
  display: inline-block;
  border: 1px solid #1890ff;
}

.children-nodes-parent {
  overflow: hidden;
  transition: all .3s;
}
